const padStart0 = (n: number): string => {
  // 总共需要长度是 2 位，不满足从前面开始补 0
  // padStart(2, '0')
  return n < 10 ? (n + '').padStart(2, '0') : (n + '')
}

const formatTime = (date?: string | Date):string => {
  if(!date) date = new Date()
  date = new Date(date)
  const h = date.getHours()
  const m = date.getMinutes()
  const s = date.getSeconds()

  return `${padStart0(h)}:${padStart0(m)}:${padStart0(s)}`
}

// !#1 定义本地数据的类型
// type TItem = { count: number; time: string }
interface IItem { count: number; time: string }
type TList = IItem[]

const LOG = 'LOG'

// !#2 获取本地数据的方法
const getData = (): TList => {
  return JSON.parse(localStorage.getItem(LOG) || '[]') as TList
}

// !#3 存储数据到本地的方法
const saveDataToLocal = () => {
  // 获取原来的数据，在这个基础上每次加一条
  const originArr = getData()
  originArr.push({
    // 在最后一条 count 的基础上 + 1
    count: originArr.length > 0 ? originArr[originArr.length - 1].count + 1 : 1,
    time: formatTime()
  })
  localStorage.setItem(LOG, JSON.stringify(originArr))
}

// 渲染到页面

const renderList = () => {
  // 每次调用渲染方法的时候存一条数据
  saveDataToLocal()

  const list = getData()

  const oApp = document.querySelector('#app')
  // 获取
  // console.log(oApp?.innerHTML)
  // 赋值的时候不能用可选链
  // oApp?.innerHTML = 'xxx'
  // [{ count: 1, time: '2022:10:12' }, { count: 2, time: '2022:11:12' }]
  // ['次数：1，时间：2022:10:12', '次数：2，时间：2022:11:12']
  ;(oApp as HTMLDivElement).innerHTML = list.map(item => `次数：${padStart0(item.count)}，时间：${item.time}`).join('<br/>')
}

renderList()


export { }